<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Accordion Tools - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
	<style>
.small-toolbar div{
	margin:0;
	padding:0;

}

/**顶部按钮**/
.small-toolbar .icon-bag-common{
	width: 16px;
	height: 16px;
	display: inline-block ;
	position: relative;
    top: 1px;
    left: 4px;
	cursor: pointer;
}

.small-toolbar .icon-spread{
    background: url(img6/spread.png) no-repeat center center;
	
}
.small-toolbar .icon-fold{
    background: url(img6/fold.png) no-repeat center center;
	
}

/**底部按钮**/
.small-toolbar .icon-outer{
	width:26px;
	height:26px;

}

.small-toolbar .icon-bg-common{
	width: 26px;
	height: 26px;
	display: block;
	text-align: center;
	cursor: pointer;
}
.small-toolbar .icon-bg-img{
	background: url(img6/tool-panel.png) no-repeat center center;
}
.small-toolbar .icon-bg-img:hover{
	background: url(img6/tool-panel-hover.png) no-repeat center center;
}


.small-toolbar .icon-inner{
	width:17px;
	height:17px;
}


.small-toolbar .icon-common{
	width: 14px;
	height: 14px;
	display: inline-block ;
	position: relative;
    top: 5px;
    left: 4px;
}



.small-toolbar .icon-bg-color{
    background: url(img6/bg-color.png) no-repeat center center;
	
}


.small-toolbar .icon-font-color{
    background: url(img6/font-color.png) no-repeat center center;
}

.small-toolbar .icon-line-color{
    background: url(img6/line-color.png) no-repeat center center;
}


.small-toolbar .icon-line-style{
    background: url(img6/line-style.png) no-repeat center center;
}


.small-toolbar .icon-line-width{
    background: url(img6/line-width.png) no-repeat center center;
}
      

.small-toolbar .icon-del{
    background: url(img6/del.png) no-repeat center center;
}

	  
	</style>
</head>
<body style="margin:100px;padding:100px;">


<!-- pid-toolbar全局手柄 -->
<div  class="small-toolbar" style="">

    <!-- 工具箱--顶部 -->
    <div title="展开">
		<div class="icon-bag-common icon-spread"></div>
	</div>

    <!-- 工具箱--底部功能区 -->
    <div  style="">
	
		<div class="icon-outer" title="背景颜色">
			<div class="icon-bg-common icon-bg-img" >
				<div class="icon-inner">
					 <div class="icon-common icon-bg-color"></div>
				</div>
				
			</div>
		</div>
		<div class="icon-outer" title="字体颜色">
		   <div class="icon-bg-common icon-bg-img">
				<div class="icon-inner">
					<div class="icon-common icon-font-color"></div>
				</div>
		   </div>
		</div>
		<div class="icon-outer" title="线条颜色">
			<div class="icon-bg-common icon-bg-img">
				<div class="icon-inner">
					<div class="icon-common icon-line-color"></div>
				</div>
			</div>
		</div>
		<div class="icon-outer" title="线条宽度">
			<div class="icon-bg-common icon-bg-img">
				<div class="icon-inner">
					<div class="icon-common icon-line-width"></div>
				</div>
			</div>
		</div>
		<div class="icon-outer" title="线条样式">
			<div class="icon-bg-common icon-bg-img">
				<div class="icon-inner">
					<div class="icon-common icon-line-style"></div>
				</div>
			</div>
		</div>
		<div class="icon-outer" title="字体大小">
			<div class="icon-bg-common icon-bg-img">
				<div class="icon-inner">
					<div class="icon-common ">12</div>
				</div>
			</div>
		</div>
		<div class="icon-outer" title="删除">
			<div class="icon-bg-common icon-bg-img">
				<div class="icon-inner">
					<div class="icon-common icon-del"></div>
				</div>
			</div>
		</div>
    </div>
</div>


<script>

</script>
</body>
</html>